<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <style>
        @page {
            @bottom-center {
                margin-top: 1.5in;
                content: element(bottom-center);
                color:black;
            };
        }
        .bottom-center {
            margin-top: 0.1cm;
            display: block;
            width: 650px;
            margin-left: 33px;
            position: running(bottom-center);
            border-top: 1px solid black;
        }
        td {
            height: 30px;
            padding-left: 5px;
            border: 1px solid #000;
            border-collapse: collapse;
        }
        th {
            padding-left: 5px;
            border: 1px solid #000;
            border-collapse: collapse;
            white-space: nowrap;
        }
        .table_style {
            border: 1px solid #000;
            border-collapse: collapse;
            width: 650px;
        }
        .allVolunteers_table_style {
            border: none;
            border-collapse: collapse;
            width: 480px;
        }
        .allVolunteers_table_style td{
            border: none;
        }
        .allVolunteers_table_style th{
            border: none;
        }
        .volunteer {
            text-align: right;
            padding-right: 10px;
            min-width: 100px;
        }
        .vo {
            display: inline-block;
            line-height: 1;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        .other_line {
            margin-top: 20px;
            border: 0.5px solid black;
        }
        .volunteer_type {
            height: 50px;
        }
        .volunteer_type_1 {
            display: inline-block;
            line-height: 1.5;
            width: 155px;
        }
        .volunteer_type_2 {
            display: inline-block;
            line-height: 1.5;
            width: 200px;
        }
        .reason {
            height: 70px;
        }
        .approval {
            text-align: center;
            background-color: #BFBFBF;
            height: 30px;
        }
        .tea_name {
            height: 55px;
        }
        .yz {
            height: 130px;
        }
        .signature {
            margin-top:-8px;
            float:left;
        }
        .date {
            margin-top:-8px;
            margin-right: 160px;
            float:right;
        }
    </style>
</head>
<body style="width: 700px;font-family: SimHei;">
<div style="width: 700px">
    <h2 style="margin-left:105px;text-align: center;">申请志愿服务表格
        <img style="float:right;height: 90px;margin-top: -35px;" src=""/>
    </h2>
</div>
<div style="padding-top: 30px">
    <table align="center" class="table_style" >
        <tr>
            <th>姓名</th>
            <td th:text="${requestMessage.name}">name</td>
            <th>日期</th>
            <td th:text="${requestMessage.date}">date</td>
        </tr>
        <tr>
            <th>申请类型</th>
            <td class="volunteer_types" colspan="3" >
                <div th:class="${volunteerTypes.size()} > 4 ? 'volunteer_type_1' : 'volunteer_type_2'" th:each="type : ${volunteerTypes}">
                    <input type="checkbox" readonly="readonly" th:name="${type.dictName}" th:checked="${type.check}"/>
                    <p style="display: inline;" th:text="${type.remark}">remark</p>
                </div>
            </td>
        </tr>
        <tr>
            <th>电话</th>
            <td colspan="3" th:text="${requestMessage.phone}">13800000000</td>
        </tr>
        <tr>
            <th>邮件</th>
            <td colspan="3" th:text="${requestMessage.email}">Email</td>
        </tr>
        <tr>
            <th>学校</th>
            <td colspan="3" th:text="${requestMessage.school}">school</td>
        </tr>
        <tr>
            <th>专业</th>
            <td colspan="3" th:text="${requestMessage.speciality}">speciality</td>
        </tr>
        <tr>
            <th>志愿项目</th>
            <td colspan="3">
                <table align="center" class="allVolunteers_table_style">
                    <tr th:each="allVolunteer : ${allVolunteers}">
                        <td class="volunteer" th:text="${allVolunteer.getKey()} + ':'">Volunteer Name</td>
                        <td>
                            <div class="vo" th:each="volunteer : ${allVolunteer.getValue()}">
                                <input type="checkbox" style="margin: auto" readonly="readonly" th:name="${volunteer.dictName}" th:checked="${volunteer.check}"/>
                                <p style="margin: auto;display: inline-block;" th:text="${volunteer.dictValue}"></p>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="volunteer">其他:</td>
                        <td>
                            <hr class="other_line" align="center"/>
                            <hr class="other_line" align="center"/>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr class="reason">
            <th>申请备注</th>
            <td colspan="3" th:text="${requestMessage.reason}">Reason of applying</td>
        </tr>
        <tr>
            <th>是否确认</th>
            <td colspan="3">
                <input type="checkbox" readonly="readonly" style="margin: auto" th:name="${yesConfirm}"th:checked="${yesConfirm}"/>
                是<p style="margin-left: 90px;display: inline;"></p>
                <input type="checkbox" readonly="readonly" style="margin-left: 40px" th:name="${noConfirm}"th:checked="${noConfirm}"/>
                否
            </td>
        </tr>
        <tr class="approval">
            <th colspan="4" >审批</th>
        </tr>
        <tr class="tea_name">
            <th>辅导员</th>
            <td colspan="3">
                <p class="signature">是否同意:</p>
                <p class="date">日期:</p>
            </td>
        </tr>
        <tr class="yz">
            <th>院长</th>
            <td colspan="3">
                <p class="signature">是否同意:</p>
                <p class="date">日期:</p>
            </td>
        </tr>
    </table>
    <div style="margin-left: 25px;">
        <h4>章:</h4>
        <h4>日期:</h4>
    </div>
    <footer class="bottom-center">
        <div style="float:left;font-size: 13px" th:text="${requestMessage.school}">学校名</div>
        <div style="float:right;font-size: 13px">xxx学校xx专业xxx志愿服务申请书 2023v1.0</div>
    </footer>
</div>
</body>
</html>
